<template>
  <view class="detail-list-section">
    <view class="section-title">{{ title }}</view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">{{ loadingText }}</text>
    </view>

    <!-- 空状态 -->
    <view v-else-if="dataList.length === 0" class="empty-container">
      <text class="empty-text">{{ emptyText }}</text>
    </view>

    <!-- 明细列表 -->
    <view v-else class="detail-list-container">
      <view
        v-for="(item, index) in dataList"
        :key="getItemKey(item, index)"
        class="detail-item"
      >
        <view class="detail-item-content">
          <view
            v-for="field in displayFields"
            :key="field.key"
            class="detail-row"
          >
            <text class="detail-label">{{ field.label }}：</text>
            <text class="detail-value">{{
              formatFieldValue(item, field)
            }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 定义字段配置接口
interface FieldConfig {
  key: string;
  label: string;
  formatter?: (value: any, item?: any) => string;
}

// 定义组件 Props
interface Props {
  title?: string;
  dataList?: any[];
  loading?: boolean;
  loadingText?: string;
  emptyText?: string;
  displayFields?: FieldConfig[];
  keyField?: string;
}

// 设置默认值
const props = withDefaults(defineProps<Props>(), {
  title: "明细列表",
  dataList: () => [],
  loading: false,
  loadingText: "加载中...",
  emptyText: "暂无明细数据",
  displayFields: () => [],
  keyField: "ID",
});

// 获取列表项的唯一标识
const getItemKey = (item: any, index: number): string => {
  return item[props.keyField] || index.toString();
};

// 格式化字段值
const formatFieldValue = (item: any, field: FieldConfig): string => {
  const value = getNestedValue(item, field.key);

  if (field.formatter) {
    return field.formatter(value, item);
  }

  return value || "";
};

// 获取嵌套对象的值（支持 a.b.c 格式）
const getNestedValue = (obj: any, path: string): any => {
  return path.split(".").reduce((current, key) => {
    return current && current[key] !== undefined ? current[key] : null;
  }, obj);
};
</script>

<style lang="scss" scoped>
.detail-list-section {
  margin-top: 20px;

  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #7881de;
  }

  .loading-container,
  .empty-container {
    text-align: center;
    padding: 40px 20px;
    color: #999;

    .debug-text {
      display: block;
      font-size: 12px;
      color: #666;
      margin-top: 8px;
    }
  }

  .detail-list-container {
    .detail-item {
      background: #f8f9fa;
      border-radius: 12px;
      margin-bottom: 16px;
      overflow: hidden;
      border: 1px solid #e9ecef;

      .detail-item-content {
        padding: 16px;

        .detail-row {
          display: flex;
          margin-bottom: 12px;
          align-items: flex-start;

          &:last-child {
            margin-bottom: 0;
          }

          .detail-label {
            flex-shrink: 0;
            width: 80px;
            font-size: 14px;
            color: #666;
            font-weight: 500;
          }

          .detail-value {
            flex: 1;
            font-size: 14px;
            color: #333;
            word-break: break-all;
            line-height: 1.4;
          }
        }
      }
    }
  }
}
</style>
